<template>
  <div class="sj">
    <searched><div class="jia">+</div></searched>
    <div class="nav">
      <ul>
        <li v-for="(item,index) in title" :key="index" @click="fn(index)" :class="{active:componentId=== arr[index]}">{{item}}</li>
      </ul>
      <HeadSlot>{{hh}}</HeadSlot>
    </div>
    <keep-alive>
      <component :is="componentId" ></component>
    </keep-alive>
  </div>
</template>

<script>
import ShuJia  from '@/components/ShuJia'
import ShuDan  from '@/components/ShuDan.vue'
import HeadSlot  from '@/components/HeadSlot.vue'
import Searched from '@/components/Searched.vue';

export default {
  components:{ShuJia,ShuDan,HeadSlot,Searched},
  name: 'SjNav',

  data() {
    return {
      title:["书架","书单"],
      componentId:"ShuJia",
      arr:["ShuJia","ShuDan"],
      qh:["选择","新建"],
      hh:"选择",
      
    };
  },
  mounted() {},
  
  methods: {
    fn(index){
      this.componentId = this.arr[index]
      this.hh = this.qh[index]
    },
   
  },
};
</script>

<style lang="less" scoped>
.jia{
  height:16px;
  width:.5rem;
  line-height:100%;
  font-size:20px;
  border-left: 2px solid rgb(24, 22, 22);
  padding-left:.12rem;
  margin-top:.12rem;
}
.sj{
  font-size:.16rem;
  box-sizing: border-box;
  width:100%;
  height:100%;
  padding:0 .15rem;
  .nav{
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #ccc;
    height:.72rem;
    line-height:.72rem;
    font-size:.2rem;
    &>ul{
      display: flex;
      li{
        margin-right:.84rem;
      }
      .active{
        color:#1c88eb;
      }
    }
  }
}
</style>